<template>

	<view class="content">
		<view>
			<button type="primary" @click="but_postData()">确定</button>
			<button type="primary " @click="get_data_but()">获取</button>
		</view>
		<uni-collapse v-for="(item,index) in ragedatas">
			<uni-collapse-item :title=item.name
				thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
				<view class="tag">
					<uni-tag type="primary" circle="true" text="加入赛事"></uni-tag>
				</view>
				<view>
					<text class="textsys">地&emsp;&emsp;址:&emsp;{{item.addresss}}</text>
				</view>
				<view>
					<text class="textsys">足环号码:&emsp;{{item.zuhao}}</text>
				</view>
				<view>
					<text class="textsys">羽&emsp;&emsp;色:&emsp;{{item.yuse}}</text>
				</view>
				<view>
					<text class="textsys" style="color: red;">归巢时间:&emsp;{{item.backtime}}</text>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userdatas: [],
				ragedatas: []
			}
		},
		created() {

		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			but_postData() {
				//读取数据库数据
				uni.request({
					url: 'https://open.apisql.cn/api/tangshaohua/userdata', //仅为示例，并非真实接口地址。
					method: 'POST',
					headers: {
						'Authorization': 'Bearer apisqlp@eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1IjoxMjQyNzY0OTg1NDk5NjQ5LCJwIjoiYyIsImV4cCI6MTcyNjIxNzcwM30.Jw_6SGBRgGI4_cMetR3ExWSfeWXYhh60iXLOdpYbAjQ',
						'Content-Type': 'application/json',
						'Accept': '*/*',
						'Connection': 'keep-alive'
					},
					success: (res) => {
						this.userdatas = res.data.data.result.rows;
						console.log(res.data.data.result.rows);
						//本保存数据
						uni.setStorage({
							key: 'storage_key',
							data: this.userdatas,
							success: () => {
								console.log('保存完毕!!');
							}
						});
					}
				});

			},
			get_data_but() {
				uni.getStorage({
					key: 'storage_key',
					success: (res) => {
						this.ragedatas = res.data;
						console.log("获取成功!!", this.ragedatas);
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.infotext {
		font-size: 9;
		background-color: #d3d3d9;
		border: solid 1px #70706d;
	}

	.userData_box {
		background-color: #d3d3d9;
		border-radius: 2%;
		border: solid 1px #828286;
	}

	.textsys {
		color: #5500ff;
		font-weight: bold;
		font-size: 15px;
		padding-left: 15%;
	}

	.tag {
		padding-top: 2px;
		padding-left: 75%;
	}
</style>